
<template>
    <div id="app">
        <div id="main" style="width: 800px;height:370px;"></div>
    </div>
  </template>
   
  <script>
   
  export default {
    name: 'App',
    components: {},
    mounted() {
      this.onExample();
    },
    methods: {
      onExample() {
        let myChart  = this.$echarts.init(document.getElementById('main'));
        var option = {
            color:[
            '#2984F8',
            '#3ED59F',
            '#FA746B'
        ],
        legend: {},
        tooltip: {},
        dataset: {
            source: [
            ['product', '首次', '首次签约', '续约'],
            ['1/4', 43.3, 85.8, 93.7],
            ['5/1', 83.1, 73.4, 55.1],
            ['6/1', 86.4, 65.2, 82.5],
            ['7/1', 72.4, 53.9, 39.1],
            ['8/1', 72.4, 53.9, 39.1],
            ['9/1', 72.4, 53.9, 39.1],
            ['10/1', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            { 
                type: 'bar',
                barWidth: '15%',
                itemStyle:{
                barBorderRadius:[50, 50, 0, 0],
            }
             }, 
             { type: 'bar',
             barWidth: '15%',
             itemStyle:{
                barBorderRadius:[50, 50, 0, 0],
            }
            },
            { type: 'bar',
            barWidth: '15%',
            itemStyle:{
                barBorderRadius:[50, 50, 0, 0],
            }
             },
        ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
  </script>
<style scoped>
</style>